<template>
  <div>
    <TestComponent :name="'小明'" />
    {{ typeof test }}
    {{ test }}
    <div>下面是status2</div>
    <div>{{ test2 }}</div>
    <div>下面是尝试</div>
    <a-input type="text" v-model:value.number="test" />

    <a-button type="primary">133</a-button>
    <a-button type="default"></a-button>
    <a-table :columns="columns" :data-source="dataSource">
      <!-- <template #bodyCell="{columns}">
      <div v-if="columns.name==='method'">
        
      </div>
    </template> -->
    </a-table>
    <B />
    <C />
  </div>
</template>

<script setup lang="tsx">
import type { ColumnsType } from 'ant-design-vue/es/table'
import TestComponent from './components/testComponent.vue'
import { ref, watch, watchEffect, defineModel, PropType } from 'vue'
import { Item } from 'ant-design-vue/es/menu'
import { computed } from 'vue'

interface ItemType {
  name: string
  age: number
}

const dataSource = ref([
  { name: '小明', age: 123 },
  { name: '小红', age: 11 }
])
const columns: ColumnsType<ItemType> = [
  {
    title: '姓名',
    dataIndex: 'name',
    customRender({ text }) {
      return <div>姓名：{text}</div>
    }
  }
]

defineModel('title')

const test = ref(1)
const test2 = ref('2')

const props = defineProps({ data: { type: Object as PropType<ItemType> } })

const B = () => <div onClick={() => (test.value = 2)}>{test.value}</div>

const C = () =>
  dataSource.value.map((item) => (
    <div key={item.name}>
      姓名：{item.name}，年龄：{item.age}
      {item.age > 100 && <span>超过100岁了！</span>}
    </div>
  ))
</script>

<style></style>
